<!--
 * @Author: MrDotYan 2564217790@qq.com
 * @Date: 2024-08-26 10:41:26
 * @LastEditors: MrDotYan 2564217790@qq.com
 * @LastEditTime: 2024-09-25 21:57:05
 * @FilePath: /webServerAdmin/src/views/home/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="index">
    <el-row :gutter="12">
      <el-col :span="16">
        <div class="card">
          <div>
            <Title title="常用功能"></Title>
            <el-divider></el-divider>
          </div>
          <div class="grid">
            <div class="item" v-auth="'Index.Email.SendEmail'" @click="captchaEmail">
              <img src="@/assets/icons/send-email.svg" alt="" />
              <span>发送邮件</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card notice">
          <div>
            <Title title="通知/消息中心"> </Title>
            <el-divider></el-divider>
          </div>
          <div>
            <el-timeline>
              <el-timeline-item v-for="item of noticesList" :key="item.id" center :timestamp="fmt(item.createAt)" placement="top">
                <div class="notice-title">
                  <span>{{ item.title ?? "--" }}</span>
                  <el-button type="primary" link @click="viewNoticeDetails(item)">查看详情</el-button>
                </div>
                <div class="notice-context">
                  <el-text line-clamp="2">
                    <p v-html="item.context"></p>
                  </el-text>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-col>
    </el-row>
    <SendEmail ref="sendEmailRef"></SendEmail>
    <ViewNotice ref="viewNoticeRef"></ViewNotice>
  </div>
</template>

<script setup lang="ts" name="home">
import SendEmail from "../system/email/components/sendEmail.vue";
import ViewNotice from "../system/notice/components/view.vue";
import Title from "@/components/Title/index.vue";
import { onMounted, ref } from "vue";
import { fetchLastedList } from "@/api/modules/notice";
import { ResultEnum } from "@/enums/httpEnum";
import { ElNotification } from "element-plus";
import { NoticeSchema } from "@/schema";
import { fmt } from "@/utils/date";

const sendEmailRef = ref();
const captchaEmail = function () {
  sendEmailRef.value?.open();
};
const viewNoticeRef = ref();
const viewNoticeDetails = function (row) {
  viewNoticeRef.value?.open(row);
};

const noticesList = ref<Array<NoticeSchema>>([]);

function fetchNoticeLastedList() {
  fetchLastedList({ counter: 3 }).then(r => {
    const { code, message, data } = r;
    if (code === ResultEnum.SUCCESS) {
      noticesList.value = data;
    } else {
      ElNotification.error(message);
    }
  });
}
onMounted(() => {
  fetchNoticeLastedList();
});
</script>

<style scoped lang="scss">
.index {
  height: 100%;
  &:deep(.el-row) {
    height: 100%;
    .el-col {
      height: 100%;
    }
  }
  .card {
    height: 100%;
  }
  .notice {
    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      font-weight: bold;
    }
  }
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 26px 30px;
  justify-items: center;
  color: #666666;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 60px;
    height: 60px;
  }
}
</style>
